<template>
	<section class="invite" >
		<div class="invite-contain">
			<div class="pl30rem pr30rem pb30rem">
				<h2 class="invite-rules-title fs32rem c333 align-center pt30rem pb30rem bold">
					{{rules_list.title}}
				</h2>
				<p class="fs26rem c666" v-html="rules_list.content">					
				</p>
			</div>			
			<div class="layout invite-btn-countain pl20rem pr20rem bg-white" :class="{ bottom5:showApp }">
				<button class="align-center fs28rem white pt20rem pb20rem invite-btn" @click="shareShow = true">邀请好友</button>
				<router-link to="/member/invite/Detail">
					<button class="align-center fs28rem white pt20rem pb20rem invite-btn invite-btn-outline">查看我的邀请</button>
				</router-link>				
			</div>
		</div>
		<!-- 微信分享 -->		
		<div class="help-share" v-show="shareShow" @click="shareShow = !shareShow">
			<ul class="flex-left pt30rem pb30rem" v-if='showApp'>
				<li @click="share('wechat')">
					<i class="iconfont icon-weixin1 wechat auto"></i>
					<span>微信</span>
				</li>
				<li @click="share('friends')">
					<i class="iconfont icon-pengyouquan circle auto"></i>
					<span>朋友圈</span>
				</li>
				<!-- <li>
					<i class="iconfont icon-qq qq"></i>
					<span>QQ</span>
				</li>
				<li>
					<i class="iconfont icon-weibo weibo"></i>
					<span>微博</span>
				</li> -->
			</ul>
			<img src="../../../assets/share.png" alt="" style="pointer-events: none;" v-else>
		</div>
	</section>
</template>

<script>
	import { getRules } from "@/api/rules";
	import { getWechatConfig } from "@/api/goods-detail";
	import { iosapp } from '@/utils';
	export default{
	   data()
		{
		    return{
				uid          : window.localStorage.getItem('uid'),
				showApp        : window.sessionStorage.getItem('isapp'),
				url          : location.href.split('#')[0],
				rules_id     : 7,
				wechatConfig : [],
				rules_list   : [],
				shareShow    : false,
            }
		},
		created()
		{
			getRules(this.rules_id).then( res => {
				this.rules_list = res.data;
			});
			this.shareFun();
		},
		methods:{
			// 微信分享
			shareFun()
			{

				getWechatConfig(this.url).then(res => {
					this.wechatConfig = res.data;
					wx.config({
					    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					    appId: this.wechatConfig.appId, // 必填，公众号的唯一标识
					    timestamp: this.wechatConfig.timestamp, // 必填，生成签名的时间戳
					    nonceStr: this.wechatConfig.nonceStr, // 必填，生成签名的随机串
					    signature: this.wechatConfig.signature,// 必填，签名
					    jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
					});
				});
				wx.checkJsApi({
				    jsApiList: ['onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
				    success: function(res) {
				    // 以键值对的形式返回，可用的api值true，不可用为false
				    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
				    }
				});
				wx.onMenuShareTimeline(
				{
				    title: "邀请好友", // 分享标题
				    link : "https://fish.qidongwx.com/h5/register.html?uid=" + this.uid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				    imgUrl:'https://fish.qidongwx.com/static/img/logo.bfc36a2.png', // 分享图标
				    success: function () 
				    {
				    	$toast('分享成功');
					},
				});
				wx.onMenuShareAppMessage({
					title: "邀请好友", // 分享标题
					desc: "注册有好礼~", // 分享描述
					link: "https://fish.qidongwx.com/h5/register.html?uid=" + this.uid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: 'https://fish.qidongwx.com/static/img/logo.bfc36a2.png', // 分享图标
					type: '', // 分享类型,music、video或link，不填默认为link
					dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
					success: function () {
					// 用户点击了分享后执行的回调函数
						$toast('分享成功');
					}
				});
			},
			share(name)
			{
				if(name == 'wechat')
					iosapp('shareWechat')
				else
					iosapp('shareFriends')
			}
		}
	}
</script>

<style lang="less">
.invite{

	.invite-contain{
		.invite-btn-countain{ 
			width: 95%;
			height: 150/28rem;
			position: fixed;
			bottom: 0;
			.invite-btn{				
				width: 320/28rem;
				background-color: #ff0036;
				border: 1px solid #ff0036;
				border-radius: 5px;
			}
			.invite-btn-outline{
				background-color: transparent;
				color: #ff0036;
			}
		}	
		p{
			padding-bottom:130/28rem; 
			line-height: 150%;
		}
	}
	.help-share
	{
		z-index: 99;
		position: fixed;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,.8);
		width: 100%;
		height: 100%;
		img
		{
			width: 100%;
			display: block;
		}
		ul
		{
			position:fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			li
			{
				width: 25%;
				text-align: center;
				i
				{
					width: 100/28rem;
					height: 100/28rem;
					border-radius: 50%;
					line-height: 100/28rem;
					text-align: center;
					color: #fff;
					display: block;
					font-size: 60/28rem;
				}
				.weibo
				{
					background: #fe555f;
				}
				.wechat
				{
					background: #21cc51;
				}
				.qq
				{
					background: #65aef3
				}
				.circle
				{
					background: #9b8cc6;
				}
				span
				{
					font-size: 28/28rem;
					display: block;
					margin-top: 20/28rem;
				}
			}
		}
	}
	.bottom5{
		bottom: 5rem !important;
	}
}
	
</style>

